<template>
	<div>
		<cl-form ref="cl-form3"></cl-form>
	</div>
</template>

<script>
import searchCoupon from './list/searchCouponJd';
import moment from 'moment';

export default {
	data() {
		return {
			couponInfo: {} //优惠券信息
		};
	},
	components: {
		searchCoupon
	},
	mounted() {},

	methods: {
		async open() {
			let self = this;
			let navList = await this.$service.goodsMenagement.specialClassify.page({
				page: 1,
				size: 60,
				sort: 'asc',
				order: 'level',
				specialType: 104
			});
			let target = navList.list.map(i => {
				return {
					label: i.mainName,
					value: i.floorId
				};
			});

			let activity = await this.$service.goodsMenagement.wxJdActivity.list();
			let activityList = activity.map(i => {
				return {
					label: i.name,
					value: i.id
				};
			});
			let app = this.$refs['cl-form3'].open({
				props: {
					labelWidth: '120px',
					center: true,
					'custom-class': 'custom-class-dialog'
				},
				items: [
					{
						prop: 'skuImage',
						label: '商品主图：',
						component: {
							name: 'cl-upload'
						}
					},
					{
						prop: 'skuName',
						label: '商品标题',
						component: {
							name: 'el-input',
							attrs: {
								size: 'mini',
								placeholder: '请输入商品标题'
							}
						}
					},
					{
						prop: 'url',
						props: {
							labelWidth: '0px'
						},
						component: {
							name: 'search-counpon1',
							methods: {
								input(e) {
									this.$emit('input', e);
									app.setForm('defNum', e.sale);
								},
								onJmoney(e) {
									app.setForm('jljMoney', e);
								},
								Goodsinfo(e) {
									console.log(e);
									app.setForm('defNum', e.sale);
									app.setForm('skuImage', e.skuImage);
									app.setForm('skuName', e.skuName);
									self.couponInfo.couponMoney = e.couponList[0].discount;
									self.couponInfo.couponStartTime = e.couponList[0].getStartTime;
									self.couponInfo.couponEndTime = e.couponList[0].getEndTime;
									self.couponInfo.couponReceive = e.couponList[0].couponReceive;
									self.couponInfo.couponNum = e.couponList[0].couponNum;
								}
							},
							render() {
								return (
									<searchCoupon
										onGoodsInfo={this.Goodsinfo}
										onInput={this.input}
										on-jmoney={this.onJmoney}
										item={self.enterGoodsInfo}
										platform={'pdd'}></searchCoupon>
								);
							}
						},
						rules: [{ required: true, message: '请先检索商品', trigger: 'blur' }]
					},
					{
						prop: 'type',
						value: '5',
						label: '活动类型',
						component: {
							name: 'el-select',
							props: {
								placeholder: '请选择活动类型',
								clearable: true
							},
							options: [
								{
									label: '零元购',
									value: '0'
								},
								{
									label: '限时抢购',
									value: '1'
								},
								{
									label: '新人专享',
									value: '2'
								},
								{
									label: '百亿补贴',
									value: '3'
								},
								{
									label: '大转盘',
									value: '4'
								},
								{
									label: '微信5g专享',
									value: '5'
								}
							]
						},
						rules: [
							{
								required: true,
								message: '请选择商品类型',
								trigger: 'blur'
							}
						]
					},
					{
						prop: 'cid',
						label: '商品分类',
						component: {
							name: 'el-select',
							props: {
								placeholder: '商品分类'
							},
							options: target
						},
						rules: [
							{
								required: true,
								message: '请选择商品分类',
								trigger: 'blur'
							}
						]
					},
					{
						label: '商品基数',
						prop: 'defNum',
						value: 0,
						component: {
							name: 'el-input-number',
							props: {}
						},
						rules: {
							required: true,
							message: '商品基数不能为空'
						}
					},
					{
						label: '活动时间',
						prop: '_date',
						value: [
							moment()
								.add(1, 'days')
								.format('YYYY-MM-DD 00:00:00'),
							moment()
								.add(1, 'days')
								.format('YYYY-MM-DD 23:59:59')
						],
						component: {
							name: 'el-date-picker',
							props: {
								'value-format': 'yyyy-MM-dd HH:mm:ss',
								type: 'datetimerange'
							}
						},
						rules: {
							required: true,
							message: '活动时间不能为空'
						}
					},
					{
						prop: 'level',
						label: '商品排序：',
						value: 100,
						component: {
							name: 'levels',
							data() {
								return {
									level: 100
								};
							},
							props: {
								value: [String, Number]
							},
							mounted() {
								this.level = this.value;
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								}
							},
							render() {
								return (
									<div style="display:flex">
										<el-input-number
											v-model={this.level}
											controls-position="right"
											onInput={this.input}
											min={1}
											max={10000}></el-input-number>
										<span style="color:#999999;margin-left:10px">
											序号越大，排序越靠前
										</span>
									</div>
								);
							}
						}
					},
					{
						label: '是否开启限时秒杀置顶',
						prop: 'isTopListLevel',
						value: 100,
						component: {
							name: 'isTopList',
							data() {
								return {
									value: '',
									isTop: 1,
									isShow: true
								};
							},
							methods: {
								input(e) {
									this.$emit('input', e);
								},
								chanheSwitch(e) {
									this.isShow = e;
									if (!e) {
										this.$emit('input', 0);
									}
								}
							},
							render() {
								return (
									<div style="display:flex;align-items: center;">
										<el-switch
											v-model={this.isTop}
											active-value={1}
											onChange={this.chanheSwitch}></el-switch>
										{this.isShow && (
											<div style="margin:0 10px">
												<el-input-number
													v-model={this.value}
													controls-position="right"
													onInput={this.input}
													min={1}
													max={10000}></el-input-number>
												<span style="color:#999999;">
													序号越大，排序越靠前
												</span>
											</div>
										)}
									</div>
								);
							}
						}
					},
					{
						prop: 'status',
						label: '商品状态：',
						value: 1,
						component: {
							name: 'el-radio-group',
							options: [
								{
									label: '上架',
									value: 1
								},
								{
									label: '下架',
									value: 2
								}
							]
						}
					},
					{
						prop: 'top',
						label: '是否置顶：',
						value: 1,
						component: {
							name: 'el-radio-group',
							options: [
								{
									label: '是',
									value: 1
								},
								{
									label: '否',
									value: 0
								}
							]
						}
					},
					{
						label: '是否绑定spu',
						prop: 'isSpu',
						value: 0,
						component: {
							name: 'el-radio-group',
							options: [
								{
									label: '是',
									value: 1
								},
								{
									label: '否',
									value: 0
								}
							]
						}
					},
					{
						label: '是否限时秒杀',
						prop: 'isSpecial',
						value: 0,
						hidden: true,
						component: {
							name: 'el-radio-group',
							options: [
								{
									label: '是',
									value: 1
								},
								{
									label: '否',
									value: 0
								}
							]
						}
					},
					{
						label: '是否限时秒杀',
						prop: 'isTopList',
						value: 0,
						component: {
							name: 'el-radio-group',
							options: [
								{
									label: '是',
									value: 1
								},
								{
									label: '否',
									value: 0
								}
							]
						}
					},
					{
						label: '是否活动商品',
						prop: 'isActivity',
						value: 0,
						component: {
							name: 'el-radio-group',
							options: [
								{
									label: '是',
									value: 1
								},
								{
									label: '否',
									value: 0
								}
							],
							on: {
								change: val => {
									if (val == 1) {
										app.hiddenItem('activityId', false);
									} else {
										app.hiddenItem('activityId', true);
									}
								}
							}
						}
					},
					{
						prop: 'activityId',
						label: '归属活动',
						hidden: true,
						component: {
							name: 'el-select',
							props: {
								placeholder: '归属活动'
							},
							options: activityList
						},
						rules: [
							{
								required: true,
								message: '请选择归属活动',
								trigger: 'blur'
							}
						]
					}
				],
				op: {
					visible: true,
					layout: ['confirm']
				},
				on: {
					submit({ data, close }) {
						console.log(self.couponInfo);
						const [startTime, endTime] = data._date || [];
						self.$service.jd.pinduoduo
							.add({
								...data,
								couponInfo: self.couponInfo,
								url: data.url.url,
								startTime,
								endTime
							})
							.then(() => {
								self.$message({
									message: '添加成功',
									type: 'success'
								});
								self.$emit('success');
								close();
								return;
							})
							.catch(err => {
								self.$message.error(err);
							});
					}
				}
			});
			this.$forceUpdate()
		}
	}
};
</script>
<style lang="scss" scoped></style>
